<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>购物车页面</title>
</head>

<body>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .container {
      width: 100vw;
    }

    header {
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 120px;
      border-bottom: 1px solid #ccc;
    }

    .userinfo {
      height: 100%;
    }

    .avatar {
      float: right;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      margin-right: 10px;
    }

    .avatar img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      margin-top: 20px;
    }

    .username {
      line-height: 120px;
      float: right;
      margin-right: 100px;
    }

    .banner {
      display: inline;
      font-size: 1.5em;
      line-height: 120px;
      font-weight: 600;
      margin-left: 100px;
    }

    .chart {
      width: 90%;
      margin: 5% 5% 0 5%;
    }

    .tbody tr td {
      text-align: center;
      padding: 20px 0;
    }

    button {
      width: 80px;
      line-height: 30px;
    }

    footer {
      margin-left: 5%;
    }

    .num-input {
      width: 25px;
      height: 20px;
    }
    .mui-search{
      width: 1000px;
      margin: 20px auto;
    }
    .mui-search input{
      height: 30px;
      width: 120px;
    }
    .name{
      margin-left: 30px;
    }
  </style>
  <div class="container">
    <header>
      <span class="banner">
        llvyr的购物商城
      </span>
      <div class="userinfo">
        <div class="username">
          <span class="username-txt">llvyr</span> <span class="loginOut">退出 </span>
        </div>
        <div class="avatar">
          <img src="" alt="">
        </div>

      </div>
    </header>
    <div id="chart-container">
      <div class="mui-search">
        <span>价格查询</span>
        <input id="min" value="" /> —
        <input id="max" value="" />
        <button type="button" id="priceSerach">查询</button>
        <span class="name">商品名称查询</span>
        <input id="goodsName" value="" />
        <button type="button" id="nameSerach">查询</button>
      </div>
      <table class="chart">
        <thead class="thead"></thead>
        <tbody class="tbody"></tbody>
      </table>
      <footer>
        <button class="delAllSeclected">批量删除</button>
        <button class="reverseBtn">反选</button>
      </footer>
    </div>
    <script src="utils.js"></script>
    <script src="table.js"></script>
    <script>
      // 获取当前登录用户的信息
      const user = getCurrentUser()
      document.querySelector('.username-txt').innerHTML = user.account
      // 渲染用户信息
      document.querySelector('.avatar img').src = user.avatar
      document.querySelector('.loginOut').addEventListener('click', function () {
        removeCurrentUser('user')
        window.location.href = './index.html'
      })

      // 购物车类 
      let theadData = ["#", "商品名称", "商品价格", "商品购买数量", "商品折扣"]
      let tbodyData = [{
          "id": 1,
          "goodsName": "电脑1",
          "price": "6000",
          "num": "1",

          "discount": 0.75,
        },
        {
          "id": 2,
          "goodsName": "电脑2",
          "price": "5000",
          "num": "1",

          "discount": 0.75,
        },
        {
          "id": 3,
          "goodsName": "电脑3",
          "price": "6000",
          "num": "1",

          "discount": 0.75,
        },
        {
          "id": 4,
          "goodsName": "电脑4",
          "price": "6000",
          "num": "1",

          "discount": 0.75,
        },
      ]
      //生成购物车
      new DynamicTable(".chart", ".thead", ".tbody", theadData, tbodyData, ".reverseBtn", ".delAllSeclected")
      //  搜索逻辑
      const copyList = tbodyData
      const olderLength = copyList.length
      const priceSerach = document.querySelector('#priceSerach')
      const nameSerach = document.querySelector('#nameSerach')
      const min = document.querySelector('#min')
      const max = document.querySelector('#max')
      const goodsName = document.querySelector('#goodsName')
      // 按商品名称搜索 
     nameSerach.onclick = function onNameSerach() {
       
        if (goodsName.value.trim()) {
          list = copyList.filter(item => item.goodsName.includes(goodsName.value.trim()))
     
          if (list.length <= olderLength && list.length !== 0) {
                 
            new DynamicTable(".chart", ".thead", ".tbody", theadData, list, ".reverseBtn", ".delAllSeclected")
            clearValu()
          } else {
            alert("暂无此商品")
            clearValu()
          }
        } else {
          new DynamicTable(".chart", ".thead", ".tbody", theadData, copyList, ".reverseBtn", ".delAllSeclected")
          clearValu()
        }
      }
    // 按价格搜索
      priceSerach.onclick = function onPriceSerach() {
  
        if (min.value.trim() || max.value.trim()) {
         let list = copyList.filter(item => item.price >= parseInt(min.value.trim()) && item.price <=
              parseInt(max.value.trim()))
          if (list.length <= olderLength && list.length !== 0) {
            console.log(list);
            new DynamicTable(".chart", ".thead", ".tbody", theadData, list, ".reverseBtn", ".delAllSeclected")
            clearValu()
          } else {
            alert("暂无此商品")
            new DynamicTable(".chart", ".thead", ".tbody", theadData, copyList, ".reverseBtn", ".delAllSeclected")
            clearValu(0)
          }
        } else {
          new DynamicTable(".chart", ".thead", ".tbody", theadData, copyList, ".reverseBtn", ".delAllSeclected")
          clearValu()
        }
      }
      function clearValu(){
        min.value =''
          max.value =''
          goodsName.value =''
      }
    </script>
</body>

</html>
<!-- 
      基本功能点
      1. 用户登录
      2. 增删改查
      3. 全选 / 反选
      4. 批量删除
   -->